<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<title></title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			/*-------------------------------------------*/
			var InterValObj; //timer变量，控制时间  
			var count = 60; //间隔函数，1秒执行  
			var curCount; //当前剩余秒数  
			var code = ""; //验证码  
			var codeLength = 6; //验证码长度  
			function sendMessage() {
				curCount = count;
				var phone = $("#phone").val(); //手机号码  
				if(phone != "") {
					//产生验证码  
					for(var i = 0; i < codeLength; i++) {
						code += parseInt(Math.random() * 9).toString();
					}
					//设置button效果，开始计时  
					$("#btnSendCode").attr("disabled", "true");
					$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
					InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
					//向后台发送处理数据  
					$.ajax({
						type: "POST", //用POST方式传输  
						dataType: "text", //数据格式:JSON  
						url: 'UserMessage.action', //目标地址  
						data: "phone=" + phone + "&code=" + code,
						error: function(XMLHttpRequest, textStatus, errorThrown) {},
						success: function(msg) {}
					});
				} else {
					alert("手机号码不能为空！");
				}
			}
			//timer处理函数  
			function SetRemainTime() {
				if(curCount == 0) {
					window.clearInterval(InterValObj); //停止计时器  
					$("#btnSendCode").removeAttr("disabled"); //启用按钮  
					$("#btnSendCode").val("重新发送验证码");
					code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
				} else {
					curCount--;
					$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
				}
			}
		</script>

		<style>
			@charset "utf-8";
			* {
				word-wrap: break-word;
			}
			
			html {
				-webkit-text-size-adjust: none;
			}
			
			body {
				font: normal 14px/24px "微软雅黑";
			}
			/*登录注册的头部*/
			
			#header {
				height: 111px;
			}
			
			.header_inner {
				width: 1181px;
				margin: auto;
			}
			
			.header_left {
				/*width: 525px;*/
				float: left;
			}
			
			.header_left img {
				float: right;
				margin-top: 21px;
			}
			
			.header_center {
				color: #525898;
				font-size: 24px;
				border-bottom: 1px solid #CCCCCC;
				float: left;
				margin-left: 59px;
				margin-top: 32px;
			}
			
			.header_center h3 {
				/*border-bottom: 1px solid #CCCCCC;*/
				background: url(img/login-01.png ) no-repeat bottom;
				line-height: 38px;
			}
			
			.header_right {
				/*width: 417px;*/
				float: left;
				margin-top: 27px;
				margin-left: 700px;
			}
			/*找回密码*/
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			body {
				font: 12px/1.5 Tahoma;
			}
			
			#background {
				height: 692px;
				background: url(img/login-background.png) no-repeat;
				background-size: cover;
				overflow: hidden;
			}
			
			#wrap {
				width: 600px;
				height: 470px;
				margin: 150px auto;
			}
			
			#tab {
				height: 60px;
				overflow: hidden;
				zoom: 1;
				background: #eeeeee;
				border: 3px solid #ccc;
			}
			
			#tab li {
				height: 60px;
				line-height: 54px;
				text-align: center;
				font-size: 22px;
				background: #eeeeee;
			}
			
			#tab li.current {
				color: #000;
			}
			
			#content {
				border: 3px solid #CCCCCC;
				border-top-width: 0;
				width: 595px;
				height: 415px;
				background: #FFFFFF;
				position: relative;
			}
			
			#content ul {
				line-height: 25px;
				display: none;
				margin: 0 30px;
				padding: 10px 0;
			}
			/*表单的样式==========================================================*/
			
			.form {
				width: 344px;
				height: 303px;
				margin: auto;
			}
			
			.form p {
				display: block;
				float: left;
				font-size: 13px;
			}
			
			.phone_num {
				margin-top: 45px;
			}
			
			.phone_num,
			.password_1,
			.again_p,
			.submit {
				width: 338px;
				height: 45px;
				margin-bottom: 8px;
			}
			
			.yanzheng {
				width: 179px;
				height: 45px;
				margin-bottom: 8px;
			}
			
			.password_1 {}
			
			.password_2 {}
			
			.OK {
				float: left;
				margin-left: 85px;
				margin-top: 8px;
			}
			
			.submit {
				background: #FFFFFF;
			}
			
			.resiger_1 {
				margin-left: 266px;
				text-decoration: none;
				color: #6C6C6C;
			}
			/*#checkCode{width: 20px; height: 20px;}*/
			
			#btnSendCode {
				width: 154px;
				height: 48px;
			}
			/*底部图标*/
			
			.iconfont {
				height: 184px;
				overflow: hidden;
			}
			
			.iconfont .inner_icon {
				width: 1196px;
				margin: auto;
			}
			
			.iconfont dl {
				width: 300px;
				float: left;
				margin-top: 63px;
				margin-left: 73px;
			}
			
			.iconfont dl dt {
				float: left;
				margin-right: 10px;
			}
			
			.iconfont dl dd {
				float: left;
				line-height: 24px;
			}
			/*footer*/
			
			#footer_wrap {
				height: 119px;
				background: #dddddd;
			}
			
			.footer_inner {
				width: 1106px;
				margin: auto;
			}
			
			.left {
				float: left;
				/*margin: 25px  10px  0  411px; */
				margin-top: 25px;
			}
			
			.center {
				float: left;
				font-size: 14px;
				margin-top: 49px;
				margin-left: 20px;
			}
			
			.right {
				float: left;
				margin-top: 51px;
				margin-left: 208px;
			}
			
			.right a {
				color: #000000;
				text-decoration: none;
			}
			/*弹出*/
			
			.po_phone_num {
				display: none;
				color: #EC3E7D;
				position: absolute;
				right: -37px;
				top: 61px;
			}
			
			.po_password {
				display: none;
				color: #EC3E7D;
				position: absolute;
				right: -53px;
				top: 176px;
			}
			
			.po_again_p {
				display: none;
				color: #EC3E7D;
				position: absolute;
				right: -37px;
				top: 235px;
			}
			
			.form_act {
				display: none;
				color: #EC3E7D;
			}
		</style>
	</head>

	<body>
		<div id="header">
			<div class="header_inner">
				<div class="header_left"><img src="img/header.png"></div>

				<div class="header_center">
					<h3>可视温暖在身边</h3>
				</div>

				<div class="header_right">

					<img src="img/header2.png" alt="">
				</div>
			</div>
		</div>

		<div id="background">
			<div id="wrap">
				<ul id="tab">
					<li class="current">找回密码</li>
				</ul>

				<div id="content">
					<!--找回密码-->
					<ul style="display:block;">
						<form class="form" action="">
							<input type="text" id="phone" placeholder="用户账户" class="phone_num" name="tel" />
							<!--<input type="text" placeholder="验证码" class="yanzheng">-->

							<input type="text" id="checkCode" name="checkcode" size="6" class="yanzheng" placeholder="验证码" />
							<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />

							<input type="password" placeholder="新的密码" class="password_1" />
							<input type="password" placeholder="确认密码" class="again_p" name="password" />

							<input type="submit" value="完成" class="submit" />
							<a href="personal-register.html" target="_blank" class="resiger_1">注册用户</a>
						</form>

						<div class="po_phone_num">请输入正确的手机号码</div>
						<div class="form_act">输入正确验证码</div>
						<div class="po_password">输入不正确，至少6个字符</div>
						<div class="po_again_p">输入有误，请重新填写</div>

					</ul>

				</div>
			</div>

		</div>

		<!--三个图标的部分哦-->
		<!--底部图标-->
		<div class="iconfont">
			<div class="inner_icon">
				<dl>
					<dt><img src="img/login_icon1.png" alt=""></dt>
					<dd style="margin-right: 120px;">可视支付，余额随时看</dd>
					<dd>使用更安心</dd>
				</dl>

				<dl>
					<dt><img src="img/login_icon2.png" alt=""></dt>
					<dd style="margin-right: 120px;">数据分析，家人云查看</dd>
					<dd>温暖在身边</dd>
				</dl>
				<dl>
					<dt><img src="img/login_icon3.png" alt=""></dt>
					<dd style="margin-right: 120px;">商家入驻，审核优把关</dd>
					<dd>使用更安全</dd>
				</dl>
			</div>
		</div>

		<!--加载尾部的内容-->

		<!--footer-->
		<div id="footer_wrap">
			<div class="footer_inner">
				<div class="left"><img src="img/footer.png" alt="" /></div>
				<div class="center">
					<p>聪付版权所有：版权所有2016沪ICP证888888号2016聪付 使用聪付前必读聪付协议</p>
				</div>
				<div class="right">
					<a href="servicecenter.html">帮助中心|</a>
					<a href="tip.html">提建议</a>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			var juddge01 = juddge02 = juddge03 = juddge04 = juddge05 = false;
			//1验证手机号
			$(".phone_num").blur(function() {
				//alert(1)
				var $phone_num = $(".phone_num").val();
				var reg02 = /^1[3|4|5|7|8]\d{9}$/; //手机号

				if(reg02.test($phone_num)) {

					console.log("邮箱或者手机号正确");

					$(".po_phone_num").css("display", "none");

					juddge01 = true;
				} else {

					$(".po_phone_num").css("display", "block");

					juddge01 = false;
				}

			})

			//2.验证验证码
			//		$('.yanzheng').blur(function(){
			//			//alert(1)
			//			
			//			
			//			
			//			var $yanzheng  = $(".yanzheng").val();
			//			
			//			if(str == $yanzheng){
			//				
			//				console.log("验证码正确");
			//				
			//				juddge02=true;
			//				
			//				$(".form_act").css("display","none");
			//			}else{
			//				
			//				
			//				
			//				$(".form_act").css("display","block");
			//				
			//				juddge02 = false;
			//			}
			//		})
			//		

			//3验证密码
			$(".password_1").blur(function() {
				//alert(ok)
				var $password_1 = $(".password_1").val();

				var reg03 = /^\w{6,16}$/;

				if(reg03.test($password_1)) {

					console.log("邮箱或者手机号正确");

					juddge03 = true;

					$(".po_password").css("display", "none");
				} else {

					$(".po_password").css("display", "block");

					juddge03 = false;
				}

			})

			//4判断前后两次密码是否一致
			//判断前后两次密码是否一致

			$(".again_p").blur(function() {

					//console.log(1);//事件通过

					var $again_p = $(".again_p").val();

					var reg04 = $(".password_1").val();

					if(reg04 != "" && reg04 == $again_p) {

						console.log("密码与确认密码相符");

						juddge04 = true;

						$(".po_again_p").css("display", "none");
					} else {

						$(".po_again_p").css("display", "block");

						juddge04 = false;
					}

				})
				//判断是否符合注册条件，如果符合则注册，否则不能

			$(".submit_1").click(function() {

				//console.log(1);//点击事件成功
				//alert(1)

				//判断

				//		if(juddge01 && juddge02 &&juddge03 &&$('input[type=checkbox]').is(':checked')){
				if(juddge01 && juddge02 && juddge03 && juddge04 && $('input[type=checkbox]').is(':checked')) {
					//$("#position_form").has("id").css("display","none") && $("input[checked=checked]")
					//调用ajax注册

					var $phone_num = $(".phone_num").val();

					var $password = $(".password").val();

					$.ajax({

							url: "http://datainfo.duapp.com/shopdata/userinfo.php",

							type: "POST",

							data: {
								status: "register",
								userID: $phone_num,

								password: $password
							},
							success: function(res) {
								console.log(res);
								switch(res) {
									case "0":
										alert("用户名重名");
										break;
									case "1":
										alert("注册成功");
										window.location.href = "successful.html";
										break; //注册成功跳转到登录页
									case "2":
										alert("数据库报错");
										break;
									default:
										alert(res);
								}

							},
							error: function(res) {
								console.log(2);
							}

						}) //ajax调用结束
				} else {
					alert("请认真填写");
				}

			})

		})
	</script>

</html>